<template>
	<view :style="{ height: height + 'px', background:background}" >
		<view class="head" :style="{ height: height + 'px', background:background}" style="position: fixed; z-index: 999;">
			<view class="back" @click="back()" v-if="backShow" :style="{ top: top + 'px', color:color }">
				<uni-icons v-if="worksid" type="home" :color="color"></uni-icons>
				<uni-icons v-else type="back" :color="color"></uni-icons>
				<!-- <image v-if="worksid" src="../../../static/recommend/house.png" mode="aspectFit" 
				style="width: 39upx; height: 39upx; margin-top: calc((32px - 39upx)/2);margin-left: auto; margin-right: auto;"></image>
				<image v-else src="../../../static/recommend/icon_back.png" mode="aspectFit" style="width: 23upx; height: 39upx; 
				margin-top: calc((32px - 39upx)/2);margin-left: auto; margin-right: auto;"></image> -->
				
			</view>
			<view class="title" v-if="titleShow" :style="{ top: top + 'px', color:color, 'font-size': size + 'rpx' }">{{title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			worksid:{
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '自定义标题'
			},
			size:{
				type: String,
				default: '32'
			},
			color:{
				type: String,
				default: '#000'
			},
			titleShow: {
				type: Boolean,
				default: true
			},
			backShow: {
				type: Boolean,
				default: false
			},
			background:{
				type: String,
				default: "linear-gradient(to right, #43e97b 0%, #38f9d7 100%)"
			}
		},
		data() {
			return {
				height :0,
				top:0,
			}
		},
		mounted() {
			
		},
		created() {
			// console.log('设备信息')
			//设备信息
			let app = uni.getSystemInfoSync();
			//胶囊信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.height  = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight)*2
			this.top = menuButtonInfo.top;
		},
		methods: {
			back(){
				if(this.worksid){
					// uni.redirectTo({ url: '../index/mall' })
					// uni.reLaunch({
					//     url: '../index/mall'
					// });
				}else{
					uni.navigateBack();
				}
			}
		},
		onLoad(options) {
			
		},
		onShow() {
			
		}
	}
</script>

<style>
.head{
	position: fixed;
	width: 750rpx;
	z-index: 888;
	align-items: center;
}
.title{
	position: fixed;
	width: 750rpx;
	text-align: center;
	line-height: 32px;
	height: 32px;
}
.back{
	position: fixed;
	width: 81rpx;
	text-align: center;
	line-height: 32px;
	height: 32px;
	font-size: 32rpx;
	font-weight: 900;
	z-index: 9;
	align-items: center;
}
</style>
